<template>
    <div class="d2-dialog">
        <el-dialog
                :title=textMap[status].title
                :visible.sync="dialogVisible">
            <el-form ref="form" :rules="rules" :model="bizForm" label-width="80px">
                <el-form-item label="业务编号" v-show="status !== 'create'">
                    <el-input v-model="bizForm.id" style="margin-right: 0" disabled></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="bizForm.name"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch
                            v-model="bizForm.enabled"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="账务类型" prop="direction">
                    <el-select v-model="bizForm.direction" placeholder="请选择活动区域">
                        <el-option label="收入" value="IN"></el-option>
                        <el-option label="支出" value="OUT"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="业务编码" prop="code">
                    <el-input v-model="bizForm.code"></el-input>
                </el-form-item>
                <el-form-item label="业务ID" prop="biz_id">
                    <el-input v-model="bizForm.biz_id"></el-input>
                </el-form-item>
                <el-form-item label="业务密钥" prop="biz_secret">
                    <el-input v-model="bizForm.biz_secret"></el-input>
                </el-form-item>
                <el-form-item label="交换机" prop="exchange">
                    <el-input v-model="bizForm.exchange"></el-input>
                </el-form-item>
                <el-form-item label="队列名称" prop="queue_name">
                    <el-input v-model="bizForm.queue_name"></el-input>
                </el-form-item>
                <el-form-item label="路由键值" prop="routing_key">
                    <el-input v-model="bizForm.routing_key"></el-input>
                </el-form-item>
                <el-form-item label="阈值" prop="threshold">
                    <el-input v-model="bizForm.threshold">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">{{textMap[status].label}}</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
  import { save, update } from '@/api/trade/biz'

  const textMap = {
    update: {
      title: '更新交易业务类型',
      label: '更新'
    },
    create: {
      title: '新建交易业务类型',
      label: '保存'
    }
  }
  const bizForm = {
    id: undefined,
    name: undefined,
    title: undefined,
    biz_id: undefined,
    biz_secret: undefined,
    code: undefined,
    enabled: undefined,
    direction: undefined,
    queue_name: undefined,
    exchange: undefined,
    routing_key: undefined,
    threshold: undefined
  }
  export default {
    data () {
      return {
        dialogVisible: false,
        textMap: Object.assign({}, textMap),
        bizForm: Object.assign({}, bizForm),
        status: 'create',
        rules: {
          name: [
            { required: true, message: '请输入业务名称', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入业务编码', trigger: 'blur' }
          ],
          biz_id: [
            { required: true, message: '业务ID不能为空', trigger: 'blur' }
          ],
          biz_secret: [
            { required: true, message: '业务密钥不能为空', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          queue_name: [
            { required: true, message: '请输入队列名称', trigger: 'blur' }
          ],
          exchange: [
            { required: true, message: '请输入交换机的名称', trigger: 'blur' }
          ],
          routing_key: [
            { required: true, message: '请输入路由键值', trigger: 'blur' }
          ],
          threshold: [
            { required: true, message: '请输入阈值', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submit () {
        if (this.status === 'update') {
          this.update()
        }
        if (this.status === 'create') {
          this.save()
        }
      },
      update () {
        update(this.bizForm).then(res => {

        })
      },
      save () {
        save(this.bizForm).then(res => {

        })
      },
      open: function (status, formData) {
        this.status = status
        this.dialogVisible = true
        if (this.bizForm) {
          this.bizForm = formData
        }
      },
      close: function () {
        this.dialogVisible = false
      }
    }
  }
</script>

<style>

</style>
